<template>
  <div class="list-component">
      <el-form class="search-bar" :inline="true" :model="searchObj" >
        <el-form-item label="任务名称">
          <el-input v-model="searchObj.title" placeholder="请输入任务名称"></el-input>
        </el-form-item>
        <el-form-item label="我的任务" v-if="!idAdmin">
          <!-- <el-radio v-model="searchObj.direction" label="">全部</el-radio> -->
            <el-radio v-model="searchObj.direction" label="receive">我收到的</el-radio>
      	  <el-radio v-model="searchObj.direction" label="toDown">我下发的</el-radio>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="getList">查询</el-button>
        </el-form-item>
      </el-form>
      <div class="list">
        <div class="button-bar">
          <el-button class="btn" type="primary" size="mini" icon="el-icon-plus"  @click="onAdd" v-pms="'patrolEdit'">新建</el-button>
          <!-- <el-button class="btn" type="primary" size="mini" icon="el-icon-edit" @click="onEdit" >编辑</el-button>
          <el-button class="btn" type="primary" size="mini" icon="el-icon-delete" @click="onDelete" >删除</el-button> -->
        </div>
        <div class="data">
          <el-table :data="listData.data" ref="listData"  stripe v-height="'auto'" >
              <el-table-column type="index" label="序号" prop="index" align="center" width="60px" >
                  <div slot-scope="scope">
                      {{(listData.pageNum - 1) * listData.pageSize + 1 + scope.$index }}
                  </div>
              </el-table-column>
              <el-table-column label="任务名称" prop="title" min-width="250"></el-table-column>
			<el-table-column label="执行人" prop="operatorName" ></el-table-column>
			<el-table-column label="任务类型" prop="typeName" ></el-table-column>
			<el-table-column label="任务状态" prop="taskStatusName" ></el-table-column>
			<el-table-column label="下发时间" prop="publishTime" width="150"></el-table-column>
              <el-table-column label="操作" prop="status" align="center" width="300">
                  <slot slot-scope="scope">
                      <el-button size="mini"  @click="viewDetail(scope.row)">查看</el-button>
					  <el-button size="mini" type="warning" @click="onEdit(scope.row)"v-if="scope.row.status==0" v-pms="'patrolEdit'">编辑</el-button>
					  <el-button size="mini" type="danger" @click="onDelete(scope.row)" v-if="scope.row.status==0" v-pms="'patrolDelete'">删除
						<el-tooltip class="item" placement="top" effect="dark" content="只能删除待下发的任务">
						    <span class="el-icon-question"></span>
						</el-tooltip>
					  </el-button>
					  <el-button size="mini" type="primary" @click="onPublish(scope.row)" v-if="scope.row.status==0" v-pms="'patrolEdit'">下发</el-button>
                  </slot>
              </el-table-column>
          </el-table>
        </div>
		<el-pagination layout="prev, pager, next"
		    :current-page="listData.pageNum"
		    :page-size="listData.pageSize"
		    :total="listData.total"
		    @current-change="getList"
		    @prev-click="getList"
		    @next-click="getList"
		></el-pagination>
      </div>
    <el-dialog :title="optType" :visible.sync="showDialog">
      <component 
	  v-bind:is="curComponent" 
	  :rowId="rowId" 
	  :taskTypeList="taskTypeList" 
	  :taskStatusList="taskStatusList" 
	  @closeDialog="closeDialog" 
	  @refresh="refresh"
	  ></component>
    </el-dialog>
  </div>
</template>
<script>
import edit from "./edit.vue";
import Details from "./detail";
export default {
  components: { edit, Details },
  data() {
    return {
      searchObj: {
        title: "",
        direction:"receive"
      },
      listData: {
        pageNum: 1, //页码
        pageSize:25,
        total: 5, //总共条数
        data: []
      },
      checked:[],//选择的列表
      optType: "编辑", //新增区划/编辑区划/导入/导出
      showDialog: false,
      curComponent: "edit", //Details，edit
      rowId:"",
	  taskTypeList:[],//任务类型
	  taskStatusList:[],//任务状态
    };
  },
  watch:{
    showDialog(val){
      if(!val){
        this.rowId=""
        this.checked=[]
        this.$refs.listData.clearSelection();
      }
    },
	taskTypeList(){
		if(this.taskStatusList.length!=0 && this.listData.data.length==0){
			this.getList()
		}
	},
	taskStatusList(){
		if(this.taskTypeList.length!=0 && this.listData.data.length==0){
			this.getList()
		}
	}
  },
  computed:{
	  idAdmin(){
		  var  rotype=JSON.parse(localStorage.user).user.roleType;
		  return rotype.split(",").indexOf("1")!=-1;
	  }
  },
  methods: {
    getList(pageNum){
        var submitData={
            current:typeof pageNum=='number' ? pageNum : this.listData.pageNum,
            size:this.listData.pageSize,
            ...this.searchObj,
        };
    
        this.$http.taskList(submitData)
        .then((res)=>{
            var data=res.data.data;
            this.$set(this.listData,'pageNum',data.current);
            this.$set(this.listData,'pageSize',data.size);
            this.$set(this.listData,'total',data.total);
            this.$set(this.listData,'data',this.transData(data.records))
    
        }).catch((err)=>{
            throw(err)
        })
    },

    refresh(){
      this.getList()
    },

    //添加
    onAdd() {
      this.$refs.listData.clearSelection();
      this.optType = "新增";
      this.showDialog = true;
      this.curComponent=edit
      this.$nextTick(()=>{
        this.checked = [];
        this.rowId=""
      })
    },

    //编辑
    onEdit(rowData) {
      this.curComponent=edit
      this.optType = "编辑";
      this.showDialog = true;
      this.$nextTick(()=>{
        this.rowId=rowData.id
      })
    },
	
	onPublish(rowData){
		this.$http.taskPublish({
			id:rowData.id,
			userId:JSON.parse(localStorage.user).userId
		})
	  .then(res => {
		  this.$message.success("发布成功!")
		  this.getList(); //重新加载列表
	  }).catch(err => {
		throw ( err);
	  });
	},

    //删除
    onDelete(rowData) {
	  this.$confirm('请确认是否删除?', '警告', {
	     confirmButtonText: '确定',
	     cancelButtonText: '取消',
	     type: 'warning'
	   }).then(() => {
			this.$http.taskDelete({id:rowData.id})
			.then(res => {
					  this.$message.success("删除成功!")
				this.getList(); //重新加载列表
			}).catch(err => {
			  throw (err);
			});
	   })
    },
	
    //全选
    onSelectAll(selection) {
      this.checked = selection;
    },
    //选择
    onSelect(selection, row) {
      this.checked = selection;
    },
    
    closeDialog() {
      this.showDialog = false;
    },
    
    //查看详情
    viewDetail(rowData){
      this.curComponent=Details
      this.optType = "查看详情";
      this.showDialog = true;
      this.$nextTick(()=>{
        this.rowId=rowData.id
      })
    },
	
	transData(data){
		data.forEach((item)=>{
			this.taskStatusList.forEach((item1)=>{
				if(item.status==item1.code){
					item.taskStatusName=item1.name
				}
			})
			this.taskTypeList.forEach((item1)=>{
				if(item.type==item1.code){
					item.typeName=item1.name
				}
			})
		})
		return data;
	},
	
	//任务类型
	getTaskTypeList(){
		this.$http.getDictKeyList({parentCode:'taskType'})
		.then((res)=>{
			this.taskTypeList=res.data.data ||[]
		}).catch((err)=>{
			throw(err)
		})
	},
	
	//任务状态
	getTaskStatusList(){
		this.$http.getDictKeyList({parentCode:'taskStatus'})
		.then((res)=>{
			this.taskStatusList=res.data.data ||[]
		}).catch((err)=>{
			throw(err)
		})
	}
  },
  created() {
	this.getTaskTypeList()
	this.getTaskStatusList()
  }
};
</script>
<style scoped lang="scss">


</style>



